<template>
  <div class="jpbox">
    <div class="tab">
      <div
        v-for="(data, index) in typeData"
        :key="data.value"
        @click="changeType($event, index)"
      >
        <div
          class="btn"
          :style="{
            color: data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639',
            background: data.show === true ? '#E0EFFF' : '#fff',
          }"
        >
          {{ data.text }}
        </div>
      </div>
    </div>
    <div
      class="charts"
      v-if="typeData[1].show"
      style="
        overflow-y: auto;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
      "
    >
      <div class="app-container-area-title">
        <span class="app-container-area-title-divider"></span>
        <span>沥青混合料类型：{{ formData.fMixturetype }}</span>
      </div>

      <div style="margin-top: 8px">
        <multiLevelTableData :config="type_config" :dataList="lqtableData" />
      </div>
      <div class="jipeiBox" style="margin-top: 20px">
        <div class="app-container-area-title">
          <span class="app-container-area-title-divider"></span>
          <span>通过率分析</span>
        </div>
        <div class="errorMonitoring">
          <real_timeDataCharts :commonData="passingRate"></real_timeDataCharts>
        </div>
      </div>
    </div>

    <div
      class="charts"
      v-if="typeData[0].show"
      style="overflow-y: auto; margin-bottom: 20px"
    >
      <div class="app-container-area-title">
        <span class="app-container-area-title-divider"></span>
        <span>基本信息</span>
      </div>

      <div>
        <publicForm
          ref="publicForm"
          lableWidth="95px"
          :formObj="ssformObj"
          :formData="formData"
        >
        </publicForm>
      </div>
      <div class="app-container-area-title">
        <span class="app-container-area-title-divider"></span>
        <span>材料用量</span>
      </div>
      <div style="margin-top: 8px" class="lqlevelClass">
        <tableData
          :config="material_config"
          :dataList="materialData"
          statusType="2"
          :level="level"
          :currentRow="false"
          :stripe="false"
        />
      </div>
    </div>
  </div>
</template>

<script>
import real_timeDataCharts from "@/components/pitchManage/dyMonitorManage/real_timeDataCharts";
import TableData from "@/components/pitchManage/dyMonitorManage/el-tables"; //主页面列表
import publicForm from "@/components/public/el-form.vue"; //弹框form
import multiLevelTableData from "@/components/public/multiLevel-table"; //主页面列表
import formJs from "./regexDetail.js"; //新增弹框配置项

import {
  getAsphaltData, // 实时监控之实时数据-详情页 主页面列表详情接口
} from "@/api/request.js";

export default {
  props: ["commonData"],
  data() {
    return {
      materialData: [],
      lqtableData: [], //沥青混合料类型： 筛孔列表
      lineList: [], // 折线信息
      passingRate: {},
      ssformObj: formJs.ssformObj, //基本数据材料详情
      table_config: formJs.table_config,
      material_config: formJs.material_config,
      type_config: formJs.type_config,
      typeData: [
        { text: "材料详情", show: true },
        { text: "级配曲线", show: false },
      ],
      formData: {},
      level: [], //预警级别
      earlyWarning: [],
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.getData(newVal);
        }
      },
      immediate: true,
    },
  },
  components: {
    TableData, //主页面列表
    publicForm, //弹框表格
    multiLevelTableData,
    real_timeDataCharts,
    // selects,//下拉框
  },

  mounted() {
    // this.typeData[0].show = true
  },

  destroyed() {},
  methods: {
    changeType(e, index) {
      for (let i in this.typeData) {
        if (parseFloat(i) === index) {
          this.typeData[i].show = true;
          // checked = this.typeData[i].text;
        } else {
          this.typeData[i].show = false;
        }
      }
      // this.checked = checked;
    },
    getData(data) {
      this.typeData[0].show = true;
      this.typeData[1].show = false;
      var requestData = {
        fId: data.fId,
        companyId: data.companyId,
      };
      this.getLqHeaderData(data.machineId);
      getAsphaltData(requestData).then((res) => {
        if (res.errcode == 0) {
          this.formData = res.data.asphaltDischargeinfo;
          var materialList = res.data.asphaltDischargeinfo.materialList; //// 物料信息
          materialList[0]["name"] = "设计比例(%)";
          materialList[1]["name"] = "实际比例(%)";
          materialList[2]["name"] = "实际用量(kg)";
          materialList[3]["name"] = "误差(%)";
          (materialList[4] = {
            name: "",
            show: true,
            param0: res.data.asphaltDischargeinfo.materialList[3].warntext0,
            param1: res.data.asphaltDischargeinfo.materialList[3].warntext1,
            param2: res.data.asphaltDischargeinfo.materialList[3].warntext2,
            param3: res.data.asphaltDischargeinfo.materialList[3].warntext3,
            param4: res.data.asphaltDischargeinfo.materialList[3].warntext4,
            param5: res.data.asphaltDischargeinfo.materialList[3].warntext5,
            param6: res.data.asphaltDischargeinfo.materialList[3].warntext6,
            param7: res.data.asphaltDischargeinfo.materialList[3].warntext7,
          }),
            (this.materialData = materialList);
          this.level = [
            //预警级别
            "",
            this.materialData[3].warnvalue0,
            this.materialData[3].warnvalue1,
            this.materialData[3].warnvalue2,
            this.materialData[3].warnvalue3,
            this.materialData[3].warnvalue4,
            this.materialData[3].warnvalue5,
            this.materialData[3].warnvalue6,
            this.materialData[3].warnvalue7,
          ];

          // 沥青混合料类型： 筛孔列表
          if (res.data.asphaltDischargeinfo.asphaltRecipe != null) {
            var lqtableData =
              res.data.asphaltDischargeinfo.asphaltRecipe.linkedList;
            lqtableData[0]["dischargeDates"] = "级配上限";
            lqtableData[1]["dischargeDates"] = "级配下限";
            lqtableData[2]["dischargeDates"] = "级配中值";
            lqtableData[3]["dischargeDates"] = "目标级配";
            lqtableData[4]["dischargeDates"] = "实际级配";

            this.lqtableData = lqtableData;

            console.log(999999, this.lqtableData);
            // asphaltAggregate
            // temperature
            var lineList = res.data.asphaltDischargeinfo.asphaltRecipe.lineList; // 折线信息
            this.passingRate = {
              lineList: lineList,
              asphaltAggregate: res.data.asphaltAggregate, //油石比
              temperature: res.data.temperature, //温度
              fMixtemperature: this.formData.fMixtemperature, //拌合温度
              fActualasphaltaggregateratio:
                this.formData.fActualasphaltaggregateratio, //实际油石比
              formData: this.formData,
            };
            // this.lineList = lineList
          } else {
            this.lqtableData = [];
            // this.lineList = []
          }
          this.$emit("loadingShow", false);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getLqHeaderData(id) {
      // var aa = [];
      let params = {
        machineId: id,
      };
      this.$store.dispatch("getLqCommonData/getLqCommonData", params);
      //  中使用了命名空间，所以 需要在dispatch的时候在 getDataInfo前面加上moduleName
      var that = this;
      setTimeout(() => {
        that.headerData = JSON.parse(
          JSON.stringify(this.$store.state.getLqCommonData.dataList)
        );

        that.material_config.thead[2].label = that.headerData.fParm1;
        that.material_config.thead[3].label = that.headerData.fParm2;
        that.material_config.thead[4].label = that.headerData.fParm3;
        that.material_config.thead[5].label = that.headerData.fParm4;
        that.material_config.thead[6].label = that.headerData.fParm5;
        that.material_config.thead[7].label = that.headerData.fParm6;
      }, 500);
      // this.$store.dispatch('getTree/getTree', {
      //     companyId: JSON.parse(sessionStorage.getItem("GxEmbedded_userInfo")).companyId,
      //     userId: JSON.parse(sessionStorage.getItem("GxEmbedded_userInfo")).userId
      // })
      // console.log('ssss', this.$store.state.getTree);
    },
  },
};
</script>
<style lang="less" scope>
.jpbox {
  height: 100%;
}

.tab {
  display: flex;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #e4e7ed;
  padding: 0 0.16rem;
  margin-bottom: 30px;

  .btn {
    margin-top: 4px;
    margin-right: 16px;
    width: 102px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }
}

.charts {
  height: calc(100% - 30px);
}

.baseTitle {
  /* border: 1px solid #0c204d; */
  border-bottom: 1px solid #0c204d;

  height: 30px;
  line-height: 30px;
  position: relative;
  padding-left: 15px;
}

.baseTitle::after {
  display: block;
  content: "";
  height: 30px;
  width: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background: #0c204d;
}

.jipeiBox {
  display: flex;
  flex: 1;
  display: flex;
  flex-direction: column;

  .errorMonitoring {
    flex: 1;
  }
}

.lqlevelClass .blueClass1 {
  background: #409eff !important;
  height: 30px;
}

.lqlevelClass .blueClass1 .cell,
.lqlevelClass .orangeClass1 .cell,
.lqlevelClass .redClass1 .cell {
  padding: 0 !important;
}

.lqlevelClass .blueClass1 .cell,
.lqlevelClass .blueClass1 .cell a {
  width: 100%;
  /* display: inline-block; */
  color: #fff !important;
}

.lqlevelClass .orangeClass1 {
  background: #e6a23c !important;
  height: 30px;
}

.lqlevelClass .orangeClass1 .cell,
.lqlevelClass .orangeClass1 .cell a {
  color: #fff !important;
  width: 100%;
}

.lqlevelClass .orangeClass1 .cell span {
  display: block;
  box-sizing: border-box;
}

.lqlevelClass .orangeClass1 .cell span a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.lqlevelClass .redClass1 {
  background: #f56c6c !important;
  color: #fff !important;
  height: 30px;
}

.lqlevelClass .redClass1 .cell,
.lqlevelClass .redClass1 .cell a {
  color: #fff !important;
  width: 100%;
  /* display: inline-block; */
}

.lqlevelClass .redClass1 .cell span {
  display: block;
  box-sizing: border-box;
}

.lqlevelClass .redClass1 .cell span a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.lqlevelClass .defaltClass1 {
  background: #dbe7f5 !important;
  height: 30px;
}

.lqlevelClass .el-table {
  width: 98.5% !important;
}

.lqlevelClass .blueClass1 .cell span {
  display: block;
  box-sizing: border-box;
}

.lqlevelClass .blueClass1 .cell span a {
  width: 100% !important;
  height: 100%;
  display: flex;
  justify-content: center;
}
</style>
